<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" class="login-form">
      <!-- <h3 class="title">信息化关键基础设施统一管理平台</h3> -->
      <el-form-item prop="phonenumber">
        <el-input
          v-model="loginForm.phonenumber"
          type="tel"
          maxlength="11"
          auto-complete="off"
          style="width: 80%"
          placeholder="手机号"
        >
          <svg-icon
            slot="prefix"
            icon-class="user"
            class="el-input__icon input-icon"
          />
        </el-input>
        <el-button
          size="medium"
          type="primary"
          style="width: 20%"
          :disabled="!testMobilePhone"
          @click="sendSMs"
          >发送</el-button
        >
      </el-form-item>
      <el-form-item prop="sendCode" class="mb25">
        <el-input
          v-model="loginForm.sendCode"
          auto-complete="off"
          placeholder="验证码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon
            slot="prefix"
            icon-class="validCode"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="新密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon
            slot="prefix"
            icon-class="password"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.native.prevent="updatePassword"
        >
          <span v-if="!loading">确 定</span>
          <span v-else>重 置 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <!-- <div class="el-login-footer">
      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>
import { sendSMs, updatePassword } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        phonenumber: "",
        password: "",
        sendCode: "",
      },
      loading: false,
    };
  },
  watch: {},
  computed: {
    testMobilePhone() {
      return /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(this.loginForm.phonenumber);
    },
  },
  created() {},
  methods: {
    // 获取验证码
    async sendSMs() {
      const result = await sendSMs({
        phonenumber: this.loginForm.phonenumber,
      });
    },
    // 重置密码
    async updatePassword() {
      if (
        !this.loginForm.phonenumber ||
        !this.loginForm.password ||
        !this.loginForm.sendCode
      ) {
        this.$message.warning("请将表单填写完整");
        return;
      }
      const result = await updatePassword({
        ...this.loginForm,
      });
      this.$router.push("/login");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
@function rem($args) {
  @return calc(100vh * #{$args} / 1080);
}
.login {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  background: url("../assets/images/login-background.jpg") center no-repeat;
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  width: rem(500);
  height: rem(612);
  padding: rem(160) rem(48) rem(25);
  margin-right: calc(100vw * 200 / 1920);
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: rem(500);
    height: rem(612);
    background: url(../assets/images/login-border.png) no-repeat;
    background-size: 100% 100%;
  }
  .el-input {
    height: rem(56);
    width: 100%;
    input {
      height: rem(56);
    }
  }
  .el-input--medium .el-input__inner {
    line-height: rem(56);
  }
  .el-form-item--medium .el-form-item__content {
    line-height: rem(56);
  }
  .input-icon {
    height: rem(56);
    width: rem(20);
    margin-left: rem(20);
  }
  .el-input--medium .el-input__icon {
    line-height: rem(56);
  }
  .el-input--prefix .el-input__inner {
    padding-left: rem(62);
  }
  .el-form-item {
    margin-bottom: rem(32);
    &.mb25 {
      margin-bottom: rem(25);
    }
  }
  .el-input__inner {
    font-size: rem(20);
    color: #ffffff;
    border: rem(2) solid rgba(0, 75, 119, 0.6);
    border-radius: rem(6);
    &:focus,
    &:hover {
      border-color: rgba(0, 210, 255, 0.6);
    }
  }
  .el-checkbox__label {
    font-size: rem(16);
    color: #ffffff;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #ffffff;
  }
  .el-checkbox__inner {
    width: rem(17);
    height: rem(17);
    border: rem(1) solid #00b8ff;
    border-radius: rem(3);
    background-color: transparent;
    &::after {
      height: rem(8);
      left: rem(5);
      top: rem(2);
      width: rem(4);
    }
  }
  .el-button--medium {
    padding: 0;
  }
  .el-button.el-button--primary {
    width: rem(404);
    height: rem(56);
    font-size: rem(26);
    line-height: rem(56);
    padding: 0;
    color: #ffffff;
    background: linear-gradient(0deg, #0177e4, #00b8ff);
    border-radius: rem(6);
    &:focus,
    &:hover {
      background: linear-gradient(0deg, #0177e4, #00b8ff);
    }
  }
  .checkbox {
    margin-bottom: rem(40);
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 38%;
  height: rem(56);
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.login-code-img {
  height: rem(52);
}
</style>
